<template>
    <div class="all">
        <!-- 系统首页header -->
        <div class="header">
            <div>
                <span class="space">&nbsp;</span>
                <span>系统首页</span>
            </div>
        </div>
        <!-- 系统首页内容 -->
        <div class="container">
            <!-- 数据总计&待处理事务&运营快捷入口 -->
            <div>
                <!-- 数据总计 -->
                <div class="totalData">
                    <!-- 今日订单总数 -->
                    <div>
                        <div>
                            <i class="iconfont icon-quanbudingdan"></i>
                        </div>
                        <div>
                            <span>{{ gGetHomeInfo.ordersToday }}</span>
                            <span>今日订单总数</span>
                        </div>
                    </div>
                    <!-- 今日销售总额 -->
                    <div>
                        <div>
                            <i class="iconfont icon-consumption"></i>
                        </div>
                        <div>
                            <span>{{ gGetHomeInfo.salesToday }}</span>
                            <span>今日销售总额</span>
                        </div>
                    </div>
                    <!-- 昨日销售总额 -->
                    <div>
                        <div>
                            <i class="iconfont icon-consumption"></i>
                        </div>
                        <div>
                            <span>{{ gGetHomeInfo.yesterdaySTotalSales }}</span>
                            <span>昨日销售总额</span>
                        </div>
                    </div>
                    <!-- 近7天销售总额 -->
                    <div>
                        <div>
                            <i class="iconfont icon-consumption"></i>
                        </div>
                        <div>
                            <span>{{ gGetHomeInfo.salesInTheLastSevenDays }}</span>
                            <span>近7天销售总额</span>
                        </div>
                    </div>
                </div>
                <div class="pendingTranAndOpera">
                    <!-- 待处理事务 -->
                    <div class="pendingTran">
                        <div class="header"><span>待处理事务</span></div>
                        <div>
                            <ul>
                                <li>
                                    <div>
                                        <span class="left">待付款订单</span>
                                        <span class="right">(
                                            <span>{{ gGetHomeInfo.pendingOrders }}</span>
                                            )</span>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <span class="left">已完成订单</span>
                                        <span class="right">(
                                            <span>{{ gGetHomeInfo.theOrderHasBeenCompleted }}</span>
                                            )</span>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <span class="left">待确认退货订单</span>
                                        <span class="right">(
                                            <span>{{ gGetHomeInfo.returnOrderToBeConfirmed }}</span>
                                            )</span>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <span class="left">待发货订单</span>
                                        <span class="right">(
                                            <span>{{ gGetHomeInfo.pendingDeliveryOrders }}</span>
                                            )</span>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <span class="left">已发货订单</span>
                                        <span class="right">(
                                            <span>{{ gGetHomeInfo.shippedOrders }}</span>
                                            )</span>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <span class="left">待处理换货订单</span>
                                        <span class="right">(
                                            <span>{{ gGetHomeInfo.pendingReplacementOrders }}</span>
                                            )</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- 运营快捷入口 -->
                    <div class="operationFastEnt">
                        <div class="header">运营快捷入口</div>
                        <div>
                            <ul>
                                <li>
                                    <i class="iconfont icon-tianjiashangpin"></i>
                                    <span>添加商品</span>
                                </li>
                                <li>
                                    <i class="iconfont icon-dingdanliebiao"></i>
                                    <span>订单列表</span>
                                </li>
                                <li>
                                    <i class="iconfont icon-yonghuguanli"></i>
                                    <span>用户管理</span>
                                </li>
                                <li>
                                    <i class="iconfont icon-houtailunbo"></i>
                                    <span>轮播管理</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 商品总览和用户总览 -->
            <div class="productUserOverview">
                <!-- 商品总览 -->
                <div class="productView">
                    <div class="header">
                        <span>商品总览</span>
                    </div>
                    <div>
                        <ul>
                            <li>
                                <span>{{ gGetHomeInfo.goodsOnSale }}</span>
                                <span>已上架</span>
                            </li>
                            <li>
                                <span>{{ gGetHomeInfo.goodsOffSale }}</span>
                                <span>已下架</span>
                            </li>
                            <li>
                                <span>{{ gGetHomeInfo.goodsStockTight }}</span>
                                <span>库存紧张</span>
                            </li>
                            <li>
                                <span>{{ gGetHomeInfo.allGoods }}</span>
                                <span>全部商品</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- 用户总览 -->
                <div class="userView">
                    <div class="header">
                        <span>用户总览</span>
                    </div>
                    <div>
                        <ul>
                            <li>
                                <span>{{ gGetHomeInfo.newUser }}</span>
                                <span>新增用户</span>
                            </li>
                            <li>
                                <span>{{ gGetHomeInfo.yesterdayNewUser }}</span>
                                <span>昨日新增</span>
                            </li>
                            <li>
                                <span>{{ gGetHomeInfo.newUsersAddedThisMonth }}</span>
                                <span>本月新增</span>
                            </li>
                            <li>
                                <span>{{ gGetHomeInfo.totalNumberOfMembers }}</span>
                                <span>会员总数</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 订单统计&销售额统计 -->
            <div class="orderAndSales">
                <!-- 订单统计 -->
                <div class="orderStatistics">
                    <div class="header"><span>订单统计</span></div>
                    <div>
                        <!-- 文字统计 -->
                        <div class="fontCount">
                            <!-- 本月订单总数 -->
                            <div>
                                <span>本月订单总数</span>
                                <span>{{ gGetHomeInfo.totalOrdersForTheMonth }}</span>
                                <span><i class="iconfont icon-xiangshang1">{{
                                    gGetHomeInfo.totalOrdersComparedToThePreviousMonth }}</i>同比上月</span>
                            </div>
                            <!-- 本周单总数 -->
                            <div>
                                <span>本周单总数</span>
                                <span>{{ gGetHomeInfo.totalNumberOfOrdersForTheWeek }}</span>
                                <span><i class="iconfont icon-xiangshang1">{{
                                    gGetHomeInfo.totalNumberOfOrdersComparedToLastWeek }}</i>同比上周</span>
                            </div>
                        </div>
                        <!-- 线状图统计 -->
                        <div class="picCount">
                            <!-- 筛选统计 -->
                            <div class="picCountUp">
                                <div><span>近一{{ odate }}订单统计</span></div>
                                <div>
                                    <span @click="changeOrderECcharts" id="orderWeek" class="active">本周</span>
                                    <span @click="changeOrderECcharts" id="orderMonth">本月</span>
                                </div>
                            </div>
                            <!-- 图例 -->
                            <div>
                                <div id="orderLine"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 销售额统计 -->
                <div class="salesStatistics">
                    <div class="header"><span>销售额统计</span></div>
                    <div>
                        <!-- 文字统计 -->
                        <div class="fontCount">
                            <!-- 本月订单总数 -->
                            <div>
                                <span>本月销售额</span>
                                <span>{{ gGetHomeInfo.salesForTheMonth }}</span>
                                <span><i class="iconfont icon-xiangshang1">{{ gGetHomeInfo.yearOverYearSalesForTheMonth
                                }}</i>同比上月</span>
                            </div>
                            <!-- 本周单总数 -->
                            <div>
                                <span>本周销售额</span>
                                <span>{{ gGetHomeInfo.salesForTheWeek }}</span>
                                <span><i class="iconfont icon-xiangshang1">{{ gGetHomeInfo.yearOverYearSalesForTheWeek
                                }}</i>同比上周</span>
                            </div>
                        </div>
                        <!-- 线状图统计 -->
                        <div class="picCount">
                            <!-- 筛选统计 -->
                            <div class="picCountUp">
                                <div><span>近一{{ sdate }}销售额统计</span></div>
                                <div>
                                    <span @click="changeSaleECcharts" class="active" id="saleWeek">本周</span>
                                    <span @click="changeSaleECcharts" id="saleMonth">本月</span>
                                </div>
                            </div>
                            <!-- 图例 -->
                            <div>
                                <div id="salesLine"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
// import echarts from 'echarts'
import { mapActions, mapGetters } from 'vuex'
export default {
    name: 'ThirdSystemHomePageView',

    data() {
        return {
            value1: '',
            homeInfo: [],   //首页统计数据
            orderMonthArr: [],     //订单图一月
            monthOrdersToday: [],   //一月订单数
            monthSalesToday: [],    //一月销售额数
            orderWeekArr: [],   //订单图一周
            weekOrdersToday: [],    //一周订单数
            weekSalesToday: [],  //一周销售额数
            orderState: 1,    //订单图的周月判断  为1就是周，为0就是月
            saleState: 1,    //销售图的周月判断
            orderDate: [],
            OrderDate: [],
            SaleDate: [],
            saleDate: [],
            odate: '周',
            sdate: '周',

        };
    },
    created() {
        this.orderDate = this.orderWeekArr
        this.OrderDate = this.weekOrdersToday
        this.saleDate = this.orderWeekArr
        this.SaleDate = this.weekSalesToday
        this.haha()
    },

    mounted() {
        this.getXAisData()
        this.orderLineDiagram(),
            this.salesLineDiagram()
    },

    computed: {
        ...mapGetters('home', ['gGetHomeInfo'])

    },

    methods: {
        ...mapActions('home', ['getHomeInfo']),
        haha() {

            this.getHomeInfo().then(res => {
                console.log('res', res);
            })
        },
        // 更改订单echarts图
        changeOrderECcharts() {
            let orderMonth = document.getElementById('orderMonth')
            let orderWeek = document.getElementById('orderWeek')
            if (this.orderState == 0) {
                this.orderState = 1
                orderWeek.setAttribute('class', '')
                orderMonth.setAttribute('class', 'active')
                this.odate = '月'
                this.orderDate = this.orderMonthArr
                this.OrderDate = this.monthOrdersToday
                this.orderLineDiagram()
            } else {
                this.orderState = 0
                orderWeek.setAttribute('class', 'active')
                orderMonth.setAttribute('class', '')
                this.odate = '周'
                this.orderDate = this.orderWeekArr
                this.OrderDate = this.weekOrdersToday
                this.orderLineDiagram()
            }
        },

        // 更改销售额echarts图
        changeSaleECcharts() {
            let saleMonth = document.getElementById('saleMonth')
            let saleWeek = document.getElementById('saleWeek')
            if (this.saleState == 0) {
                this.saleState = 1
                this.saleDate = this.orderMonthArr
                this.SaleDate = this.monthSalesToday
                this.sdate = '月'
                saleWeek.setAttribute('class', '')
                saleMonth.setAttribute('class', 'active')
                this.salesLineDiagram()
            } else {
                this.saleState = 0
                saleWeek.setAttribute('class', 'active')
                saleMonth.setAttribute('class', '')
                this.sdate = '周'
                this.saleDate = this.orderWeekArr
                this.SaleDate = this.weekSalesToday
                this.salesLineDiagram()
            }
        },

        // 获取echarts的数据
        getXAisData() {
            // 打印出getters中的gGetHomeInfo中的内容
            console.log("this.$store.getters['home/gGetHomeInfo']", this.$store.getters['home/gGetHomeInfo']);
            // 获取每月echarts图的所有数据
            let orderMonth = this.$store.getters['home/gGetHomeInfo'].orderDetailsForTheMonth
            // 获取每周echarts图的数据
            let orderWeek = this.$store.getters['home/gGetHomeInfo'].orderDetailsOfTheWeek
            console.log('orderMonth', orderMonth, 'orderWeek', orderWeek);
            // 循环遍历每月并获取需要的值
            for (let i = 0; i < orderMonth.length; i++) {
                this.orderMonthArr[i] = orderMonth[i].date.slice(5, 10)
                this.monthOrdersToday[i] = orderMonth[i].ordersToday
                this.monthSalesToday[i] = orderMonth[i].salesToday
            }
            console.log('orderMonthArr', this.orderMonthArr);
            // 循环遍历每周并获取需要的值
            for (let i = 0; i < orderWeek.length; i++) {
                this.orderWeekArr[i] = orderWeek[i].date.slice(5, 10)
                this.weekOrdersToday[i] = orderWeek[i].ordersToday
                this.weekSalesToday[i] = orderWeek[i].salesToday
            }

        },
        // 显示订单echarts图
        orderLineDiagram() {
            this.$echarts.init(document.getElementById('orderLine')).setOption({
                xAxis: {
                    type: 'category',
                    data: this.orderDate
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: this.OrderDate,
                        type: 'line',
                        areaStyle: {},
                    }
                ]
            }, true)
        },
        // 显示销售额echarts图
        salesLineDiagram() {
            this.$echarts.init(document.getElementById('salesLine')).setOption({
                xAxis: {
                    type: 'category',
                    // boundaryGap: false,
                    data: this.saleDate
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: this.SaleDate,
                        type: 'line',
                        areaStyle: {}
                    }
                ]
            })
        }

    },
};
</script>

<style scoped>
#orderLine,
#salesLine {
    height: 320px;
    width: 100%;
}

* {
    margin: 0;
    padding: 0;
}

.active {
    color: rgb(51, 204, 255);
}

ul>li {
    list-style-type: none;
}

.all {
    float: right;
    background-color: #f1f1f1;
}

canvas {
    writing-mode: vertical-lr;
}

.all>.header {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    font-size: 18px;
    padding: 0 20px;
    height: 50px;
    line-height: 50px;
}

.header .space {
    margin-right: 6px;
    background-color: rgb(28, 176, 154);
}

.header button {
    padding: 5px 10px;
}

.container {

    height: 100%;
}

.container>div {
    margin: 20px 40px;
}

.container>div:nth-child(1) {
    display: flex;
    justify-content: space-between;
}

.totalData {
    display: flex;
    flex-wrap: wrap;

}

.totalData i {
    font-size: 54px;
    color: rgb(222, 222, 222);
}

.totalData>div {
    box-sizing: border-box;
    border-radius: 20px;
    box-shadow: -8px 10px 5px rgba(6, 6, 6, .1);
    height: 120px;
    width: 45%;
    padding: 10px;
    display: flex;
    justify-content: space-around;
    margin: 10px;
    background-color: #fff;
}

.totalData>div>div {
    display: inline-block;
}

.totalData>div:nth-child(1)>div:nth-child(1) i {
    color: #f5d567;
}

.totalData>div:nth-child(2)>div:nth-child(1) i {
    color: #ee7241;
}

.totalData>div:nth-child(3)>div:nth-child(1) i {
    color: #903fec;
}

.totalData>div:nth-child(4)>div:nth-child(1) i {
    color: #4554e5;
}

.totalData>div>div:nth-child(1) {
    width: 60px;
    padding-top: 30px;
}

.totalData>div>div:nth-child(2) {
    padding: 20px 10px 0 10px;
    display: flex;
    font-size: 14px;
    text-align: right;
    height: 96px;
    flex-direction: column;
}

.totalData>div>div:nth-child(2) span {
    padding: 6px 0;
}

.totalData>div>div:nth-child(2) span:nth-child(1) {
    font-size: 20px;
}

.totalData>div>div:nth-child(2) span:nth-child(2) {
    color: #666666;
}

.pendingTranAndOpera {
    border: 1px solid rgb(232, 232, 232);
    background-color: #fff;
    width: 70%;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    border-radius: 20px;
    box-shadow: -8px 10px 5px rgba(6, 6, 6, .1);
}

.pendingTran {
    width: 46%;
    padding: 0 15px;
    margin: 0 10px 0 0;
    border-right: 1px solid rgba(6, 6, 6, .1);
}

.pendingTran .header,
.operationFastEnt .header {
    padding: 10px 0;
}

.pendingTran ul li {
    padding: 8px 0;

}

.pendingTran ul li div {
    display: flex;
    justify-content: space-between;
}

.pendingTran .right>span {
    color: red;
}

.operationFastEnt {
    width: 46%;
}

.operationFastEnt ul {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.operationFastEnt ul li {
    padding: 24px 8px;
}

.operationFastEnt ul li i {
    font-size: 30px;
}

.productUserOverview {
    display: flex;
    justify-content: space-between;
}

.productUserOverview>div {
    width: 48%;
    box-sizing: border-box;
    border-radius: 20px;
    box-shadow: -8px 10px 5px rgba(6, 6, 6, .1);
    background-color: #fff;
}

.productUserOverview .header {
    padding: 12px 20px 0;
}

.productUserOverview ul {
    display: flex;
    justify-content: space-between;
    padding: 30px 20px;
}

.productUserOverview ul li {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    text-align: center;
}

.productUserOverview ul li span:nth-child(1) {
    font-size: 36px;
    color: red;
}

.orderAndSales {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.orderStatistics,
.salesStatistics {
    width: 49%;
    box-sizing: border-box;
    border-radius: 20px;
    box-shadow: -8px 10px 5px rgba(6, 6, 6, .1);
    background-color: #fff;
}

.orderStatistics .header,
.salesStatistics .header {
    padding: 12px 18px;
}

.orderStatistics .fontCount,
.salesStatistics .fontCount {
    width: 15%;
    padding: 60px 0;
    text-align: center;
    border-right: 1px solid rgb(232, 232, 232);
    border-top: 1px solid rgb(232, 232, 232);
}

.orderStatistics .fontCount>div,
.salesStatistics .fontCount>div {
    display: flex;
    padding: 20px 0;
    flex-direction: column;
}

.orderStatistics .fontCount>div>span:nth-child(2),
.salesStatistics .fontCount>div>span:nth-child(2) {
    font-size: 24px;
}

.orderStatistics .fontCount>div>span:nth-child(3),
.orderStatistics .fontCount>div>span>i,
.salesStatistics .fontCount>div>span:nth-child(3),
.salesStatistics .fontCount>div>span>i {
    font-size: 12px;
}

.orderStatistics .fontCount>div:nth-child(1)>span>i,
.salesStatistics .fontCount>div:nth-child(1)>span>i {
    color: rgb(51, 204, 255);
}

.orderStatistics .fontCount>div:nth-child(2)>span>i,
.salesStatistics .fontCount>div:nth-child(2)>span>i {
    color: rgb(255, 1, 1);
}

.orderStatistics>div:nth-child(2),
.salesStatistics>div:nth-child(2) {
    display: flex;
    justify-content: space-between;
}

.orderStatistics .picCount,
.salesStatistics .picCount {
    display: flex;
    flex-direction: column;
    width: 80%;
}

.orderStatistics .picCountUp,
.salesStatistics .picCountUp {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    padding: 0 20px;
    height: 45px;
    line-height: 45px;
    font-size: 12px;
}

.orderStatistics .picCountUp>div:nth-child(2),
.salesStatistics .picCountUp>div:nth-child(2) {
    display: flex;
    justify-content: space-between;
}

.dateWidth {
    width: 220px;
}

.dateWidth /deep/ .el-range-input {
    font-size: 12px;
}

.orderStatistics .picCountUp>div:nth-child(2) span,
.salesStatistics .picCountUp>div:nth-child(2) span {
    padding: 0 8px;
    cursor: pointer;
}
</style>